<template>
    <div class="panel">
        <div class="panel-heading">
            <span>相关标签</span>                    
            <span @click="toggle">
                <i :class="['fa', isExpand ? 'fa-dropup' : 'fa-dropdown']"></i>
            </span>
        </div>
        <div class="panel-body animate" :style="{height: footHeight || ''}">
            <div ref="listRef">
                <van-tag 
                    class="vtag" 
                    v-for="item in list"
                    :key="item.tid" 
                    round 
                    @click="handleTag(item)"
                >{{ item.tname }}</van-tag>
            </div>               
        </div>
    </div>
</template>

<script>
import { ref, reactive, toRefs, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { Tag as VanTag } from 'vant'
export default {
    name: 'TagRelated',
    components: {
        VanTag
    },
    props: {
        list: {
            type: Array
        }
    },
    setup(props) {
        const router = useRouter()
        const listRef = ref(null)
        const params = reactive({
            isExpand: false,
            footHeight: null
        })

        const toggle = () => {
            let height = 0
            params.isExpand = !isExpand
            nextTick(() => {
                if (params.isExpand) {
                    height = window.getComputedStyle(listRef.value).height
                } 
                params.footHeight = height                  
            })            
        }

        const handleTag = item => {
            router.push({
                name: 'tag',
                params: {
                    tid: item.tid
                }
            })            
        }

        return {
            listRef,
            ...toRefs(params),
            toggle,
            handleTag
        }
    }
}
</script>

<style lang="scss" scoped>
.panel {
    padding: {
        left: 10px;
        right: 10px;
    }
    &-heading {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: {
          top: 5px;
          bottom: 10px;
        };
        margin-top: 10px;
        font-size: 16px;
    }
    &-body {
        padding: {
            top: 10px;
            bottom: 10px;
        };
        &.animate {
            height: 46px;
            transition: height 0.3s;
            overflow: hidden;
            box-sizing: border-box;
        }
    }
}
.vtag {
    margin: {
        right: 10px;
        bottom: 6px;
    }
    padding: 8px 18px;
    color:#333;
    background-color: $color-grey;
    font-size: 12px;
}
</style>